<template>
  <div 
    class="data-card"
    :class="{ 'data-card--animated': animated }"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="card-background">
      <div class="glow-effect"></div>
      <div class="border-animation"></div>
    </div>
    
    <div class="card-content">
      <div class="card-icon" :style="{ color: iconColor }">
        <component :is="icon" v-if="icon" />
      </div>
      
      <div class="card-main">
        <div class="card-title">{{ title }}</div>
        <div class="card-value">
          <AnimatedCounter 
            :value="value" 
            :unit="unit"
            :prefix="prefix"
            :suffix="suffix"
            :decimals="decimals"
          />
        </div>
        
        <div class="card-trend" v-if="trend" :class="`trend-${trend.direction}`">
          <span class="trend-icon">
            {{ trend.direction === 'up' ? '↗' : '↘' }}
          </span>
          <span class="trend-text">{{ trend.text }}</span>
        </div>
      </div>
      
      <div class="card-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-dots">
          <span class="dot" v-for="i in 3" :key="i"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { gsap } from 'gsap'
import AnimatedCounter from './AnimatedCounter.vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: Number,
    required: true
  },
  unit: {
    type: String,
    default: ''
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: ''
  },
  decimals: {
    type: Number,
    default: 0
  },
  icon: {
    type: String,
    default: ''
  },
  iconColor: {
    type: String,
    default: '#00f0ff'
  },
  trend: {
    type: Object,
    default: null
  },
  animated: {
    type: Boolean,
    default: true
  }
})

const handleMouseEnter = (e) => {
  gsap.to(e.currentTarget, {
    scale: 1.05,
    duration: 0.3,
    ease: "power2.out"
  })
  
  gsap.to(e.currentTarget.querySelector('.glow-effect'), {
    opacity: 1,
    duration: 0.3
  })
}

const handleMouseLeave = (e) => {
  gsap.to(e.currentTarget, {
    scale: 1,
    duration: 0.3,
    ease: "power2.out"
  })
  
  gsap.to(e.currentTarget.querySelector('.glow-effect'), {
    opacity: 0,
    duration: 0.3
  })
}
</script>

<style scoped>
.data-card {
  position: relative;
  background: rgba(15, 52, 96, 0.3);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  overflow: hidden;
}

.data-card--animated {
  animation: slideInUp 0.8s ease-out;
}

.card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.glow-effect {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.border-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(45deg, transparent, rgba(0, 240, 255, 0.3), transparent);
  background-size: 200% 200%;
  animation: borderGlow 3s linear infinite;
  opacity: 0.5;
}

.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-icon {
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  background: rgba(0, 240, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.card-main {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  font-weight: 400;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  color: #00f0ff;
  margin-bottom: 4px;
  line-height: 1;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.trend-up {
  color: #00ff9d;
}

.trend-down {
  color: #ff4757;
}

.trend-icon {
  font-weight: bold;
}

.card-decoration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.decoration-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #00f0ff, transparent);
  animation: pulse 2s ease-in-out infinite;
}

.decoration-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00f0ff;
  animation: dotBlink 1.5s ease-in-out infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes borderGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

@keyframes dotBlink {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
</style> 